<template>
    <div>
       <div>
           <div style="display:flex;justify-content:space-between">
               <div>
                   <!-- 如果用了封装组件的话，比如element，这个时候使用按键修饰符需要加上.native-->
                   <el-input placeholder="姓名关键字搜索" :disabled="showAdvanceSearchVisible" style="width: 300px;margin-right: 10px" prefix-icon="el-icon-search"
                             v-model="empName" @keydown.enter.native="initemps" clearable @clear="initemps"
                   ></el-input>
                   <el-button type="primary" icon="el-icon-search" :disabled="showAdvanceSearchVisible" @click="initemps">搜索</el-button>
                   <el-button type="primary"  @click="showAdvanceSearchVisible=!showAdvanceSearchVisible  ; showDepView2('2')" >
                       <i  :class="showAdvanceSearchVisible?'fa fa-angle-double-up':'fa fa-angle-double-down'" aria-hidden="true" >高级搜索</i>
                   </el-button>
               </div>
               <div >
                   <el-upload
                           :headers="headers"
                           :disabled="importDataBtnDisabled"
                           :show-file-list="false" style="display: inline-flex;margin-right: 8px"
                           class="upload-demo"
                           action="/employee/basic/import"
                           :before-upload="beforeUpload"
                           :on-success="Success"
                           :on-error="Error">
                       <el-button :disabled="importDataBtnDisabled" type="primary" :icon='importDataBtnIcon'>
                           {{importDataBtnText}}
                       </el-button>
                       <!--<el-button type="success">
                           <i  class="fa fa-level-up" aria-hidden="true">导入数据</i>
                       </el-button>-->
                   </el-upload>



                   <el-button type="primary" icon="el-icon-download" @click="exportData">
                       导出数据
                   </el-button>
                   <el-button type="primary"icon="el-icon-plus" @click="showAddEmpView">添加员工</el-button>
               </div>
           </div>
       </div>


        <!--动画效果-->
<transition name="slide-fade">
        <div v-show="showAdvanceSearchVisible" style="border:1px solid #409eff;border-radius: 5px;box-sizing: border-box;padding:5px;margin: 10px">

            <el-row>
                <el-col :span="5">
                    政治面貌:
                        <el-select v-model="searchValue.politicId" placeholder="政治面貌" style="width: 200px">
                            <el-option
                                    v-for="item in politicsstatus"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                </el-col>


                <el-col :span="4">
                    民族:
                        <el-select size="mini" v-model="searchValue.nationId" placeholder="民族" style="width: 150px">
                            <el-option
                                    v-for="item in nations"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                </el-col>


                <el-col :span="4">
                    职位:
                    <el-select size="mini" v-model="searchValue.posId" placeholder="职位" style="width: 150px">
                        <el-option
                                v-for="item in positions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>

                <el-col :span="4">
                    职称:
                    <el-select size="mini" v-model="searchValue.jobLevelId" placeholder="职称" style="width: 150px">
                        <el-option
                                v-for="item in jobLevels"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>


                <el-col :span="7">
                    聘用形式:
                    <el-radio-group v-model="searchValue.engageForm" style="margin-top: 8px">
                    <el-radio label="劳动合同">劳动合同</el-radio>
                    <el-radio label="劳务合同">劳务合同</el-radio>
                    </el-radio-group>

                </el-col>
            </el-row>

            <el-row style="margin-top: 10px">
                <el-col :span="5" >
                    所属部门:
                    <el-popover
                            placement="right-start"
                            title="请选择部门"
                            width="200"
                            trigger="manual"
                            v-model="visible2">

                        <el-tree :data="allDeps"
                                 default-expand-all="true"
                                 :props="defaultProps"
                                 @node-click="searchHandleNodeClick">
                        </el-tree>
                        <!--充当按钮-->
                        <div slot="reference" style="width: 150px;display: inline-flex;border: 1px solid #dedede;
                                  border-radius: 5px;height:24px;cursor:pointer;align-items: center;
                                  font-size: 13px;padding-left: 8px;box-sizing: border-box"
                             @click="showDepView2('1')"   >
                            {{this.inputDepName}}
                        </div>
                    </el-popover>
                </el-col>


                <el-col :span="10" >
                    入职日期:
                    <el-date-picker
                            v-model="searchValue.beginDateScope"
                            size="mini"
                            type="daterange"
                            value-format='yyyy-MM-dd'
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            align="right">
                    </el-date-picker>
                </el-col>
                <el-col :span="5" :offset="4">
                    <el-button size="mini" >取消</el-button>
                    <el-button icon="el-icon-search" type="primary" size="mini" @click="initemps('advanced')">搜索</el-button>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>
        </div>

</transition>













        <div style="margin-top: 10px">
            <el-table

                    v-loading="loading"
                    element-loading-text="玩命加载中啊..."
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(255,255,255,0.11)"

                    border
                    :data="emps.data"
                    stripe
                    style="width: 100%"
                    >
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <!--fixed固定在左边-->
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="90"
                        align="left"
                        fixed="left">
                </el-table-column>
                <el-table-column
                        prop="workID"
                        label="工号"
                        width="85"
                        align="left">
                </el-table-column>
                <el-table-column
                        prop="gender"
                        label="性别"
                        width="50">
                </el-table-column>

                <el-table-column
                        prop="birthday"
                        label="生日"
                        width="95"
                        align="left">
                </el-table-column>
                <el-table-column
                    prop="idCard"
                    label="身份证"
                    width="150"
                   >
            </el-table-column>
                <el-table-column
                        prop="wedlock"
                        label="婚姻状况"
                        width="70">
                </el-table-column>
                <el-table-column
                        prop="nation.name"
                        label="民族"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="nativePlace"
                        label="籍贯"
                        width="100"
                       >
                </el-table-column>
                <el-table-column
                        prop="politicsStatus.name"
                        label="政治面貌"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="电子邮件"
                        width="180"
                        align="left">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="电话号码"
                        width="100"
                        align="left">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="联系地址"
                        width="280"
                        align="left">
                </el-table-column>
                <el-table-column
                        prop="department.name"
                        label="所属部门"
                        width="100"
                        align="left">
                </el-table-column>
                <el-table-column
                        prop="joblevel.name"
                        label="职称"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="position.name"
                        label="职位"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="engageForm"
                        label="聘用形式"
                        width="100"
                        align="left">
                </el-table-column>
                <el-table-column
                        prop="tiptopDegree"
                        label="最高学历"
                        width="80"
                        align="left">
                </el-table-column>
                <el-table-column
                        prop="school"
                        label="毕业院校"
                        width="150"
                        align="left">
                </el-table-column>
                <el-table-column
                        prop="specialty"
                        label="专业"
                        width="150"
                        align="left">
                </el-table-column>
                <el-table-column
                        prop="workState"
                        label="在职状态"
                        width="70"
                        align="left">
                </el-table-column>
                <el-table-column
                        prop="beginDate"
                        label="入职日期"
                        width="95"
                        align="left">
                </el-table-column>
                <el-table-column
                        prop="conversionTime"
                        label="转正日期"
                        width="95"
                        align="left">
                </el-table-column>
                <el-table-column
                        prop="beginContract"
                        label="合同起始日期"
                        width="95"
                        align="left">
                </el-table-column>
                <el-table-column
                        prop="endContract"
                        label="合同截止日期"
                        width="95"
                        align="left">
                </el-table-column>
               <!-- slot-scope="scope"拿去一行数据-->
                <el-table-column
                        prop="contractTerm"
                        label="合同期限"
                        width="95"
                        align="left">
                    <template slot-scope="scope">
                        <el-tag>{{scope.row.contractTerm}}</el-tag>年
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="200"
                        fixed="right">
                    <template slot-scope="scope">
                        <el-button style="padding: 3px;"size="mini" @click="showEditEmpView(scope.row)" >编辑</el-button>
                        <el-button style="padding: 3px;"size="mini" type="primary">查看高级资料</el-button>
                        <el-button style="padding: 3px;"size="mini" type="danger" @click="deleteEmp(scope.row)">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <div style="display:flex;justify-content: flex-end">
                <el-pagination
                        @size-change="sizeChange"
                        @current-change="currentChange"
                        background
                        layout="sizes,prev, pager, next,jumper,->, total"
                        :total="emps.total">
                </el-pagination>
            </div>


            <el-dialog
                    :destroy-on-close="true"
                    :title='this.title'
                    :visible.sync="dialogVisible"
                    width="80%"
                    :before-close="handleClose">

                <div>



                   <el-form ref="empForm" :model="emp" :rules="rules">
                       <el-row>
                           <el-col :span="6">
                               <el-form-item label="姓名:" prop="name">
                                   <el-input size="mini" style="width: 150px" v-model="emp.name" placeholder="请输入员工姓名"/>
                               </el-form-item>
                           </el-col>
                           <el-col :span="5">
                               <el-form-item label="性别:" prop="gender" style="display:flex">

                                   <el-radio-group v-model="emp.gender" >
                                       <el-radio  label="男">男</el-radio>
                                       <el-radio  label="女">女</el-radio>
                                   </el-radio-group>
                               </el-form-item>
                           </el-col>
                           <el-col :span="6">
                               <el-form-item label="出生日期:" prop="birthday">
                                   <el-date-picker
                                           v-model="emp.birthday"
                                           type="date"
                                           style="width: 150px"
                                           value-format="yyyy-MM-dd"
                                           placeholder="出生日期">
                                   </el-date-picker>
                               </el-form-item>
                           </el-col>


                           <el-col :span="7">
                               <el-form-item label="政治面貌:" prop="politicId">
                                   <el-select v-model="emp.politicId" placeholder="政治面貌" style="width: 200px">
                                       <el-option
                                               v-for="item in politicsstatus"
                                               :key="item.id"
                                               :label="item.name"
                                               :value="item.id">
                                       </el-option>
                                   </el-select>
                               </el-form-item>
                           </el-col>
                       </el-row>




                       <el-row :gutter="10">
                           <el-col :span="6">
                               <el-form-item label="民族:" prop="nationId">
                               <el-select size="mini" v-model="emp.nationId" placeholder="名族" style="width: 150px">
                                   <el-option
                                           v-for="item in nations"
                                           :key="item.id"
                                           :label="item.name"
                                           :value="item.id">
                                   </el-option>
                               </el-select>
                           </el-form-item>
                           </el-col>


                           <el-col :span="5">
                               <el-form-item label="籍贯:" prop="nativePlace">
                                  <el-input prefix-icon="el-icon-s-home" v-model="emp.nativePlace" placeholder="请输入籍贯"></el-input>
                               </el-form-item>
                           </el-col>

                           <el-col :span="6">
                               <el-form-item label="电子邮件:" prop="email">
                                   <el-input v-model="emp.email" placeholder="请输入电子邮件"></el-input>
                               </el-form-item>
                           </el-col>

                           <el-col :span="6">
                               <el-form-item label="联系地址:" prop="address">
                                   <el-input prefix-icon="el-icon-s-home" v-model="emp.address" placeholder="请输入联系地址"></el-input>
                               </el-form-item>
                           </el-col>
                       </el-row>



                       <el-row :gutter="10">
                           <el-col :span="6">
                               <el-form-item label="职位:" prop="posId">
                                   <el-select size="mini" v-model="emp.posId" placeholder="职位" style="width: 150px">
                                       <el-option
                                               v-for="item in positions"
                                               :key="item.id"
                                               :label="item.name"
                                               :value="item.id">
                                       </el-option>
                                   </el-select>
                               </el-form-item>
                           </el-col>
                           <el-col :span="5">
                               <el-form-item label="职称:" prop="jobLevelId">
                                   <el-select size="mini" v-model="emp.jobLevelId" placeholder="职称" style="width: 150px">
                                       <el-option
                                               v-for="item in jobLevels"
                                               :key="item.id"
                                               :label="item.name"
                                               :value="item.id">
                                       </el-option>
                                   </el-select>
                               </el-form-item>
                           </el-col>






                           <el-col :span="6">
                               <el-form-item label="所属部门:" prop="departmentId">
                                   <!--<el-input v-model="emp.departmentId" />-->

                                   <el-popover
                                           placement="right-start"
                                           title="请选择部门"
                                           width="200"
                                           trigger="manual"
                                           v-model="visible">

                                       <el-tree :data="allDeps"
                                                default-expand-all="true"
                                                :props="defaultProps"
                                                @node-click="handleNodeClick">
                                       </el-tree>



                                            <!--充当按钮-->
                                       <div slot="reference" style="width: 150px;display: inline-flex;border: 1px solid #dedede;
                                  border-radius: 5px;height:24px;cursor:pointer;align-items: center;
                                  font-size: 13px;padding-left: 8px;box-sizing: border-box"
                                            @click="showDepView"   >
                                           {{this.inputDepName}}
                                       </div>




                                   </el-popover>


                               </el-form-item>
                           </el-col>





                           <el-col :span="7">
                               <el-form-item label="电话号码:" prop="phone">
                                   <el-input v-model="emp.phone" placeholder="请输入电话号码" size="mini"
                                   style="width: 200px" prefix-icon="el-icon-phone"
                                   ></el-input>
                               </el-form-item>
                           </el-col>
                       </el-row>



                       <el-row :gutter="10">
                           <el-col :span="6">
                               <el-form-item label="工号:" prop="workID">
                                   <el-input v-model="emp.workID" placeholder="请输入工号" size="mini"
                                             style="width: 150px" prefix-icon="el-icon-edit"
                                             disabled
                                   ></el-input>
                               </el-form-item>
                           </el-col>


                           <el-col :span="5">
                               <el-form-item label="学历:" prop="tiptopDegree">
                                   <el-select size="mini" v-model="emp.tiptopDegree" placeholder="学历" style="width: 150px">
                                       <el-option
                                               v-for="item in tiptopDegrees"
                                               :key="item"
                                               :label="item"
                                               :value="item">
                                       </el-option>
                                   </el-select>
                               </el-form-item>
                           </el-col>

                           <el-col :span="6">
                               <el-form-item label="毕业院校:" prop="school">
                                   <el-input v-model="emp.school" placeholder="请输入毕业院校" size="mini"
                                             style="width: 150px" prefix-icon="el-icon-edit"
                                   ></el-input>
                               </el-form-item>
                           </el-col>
                           <el-col :span="7">
                               <el-form-item label="专业名称:" prop="specialty">
                                   <el-input v-model="emp.specialty" placeholder="请输入专业名称" size="mini"
                                             style="width: 200px" prefix-icon="el-icon-edit"
                                   ></el-input>
                               </el-form-item>
                           </el-col>
                       </el-row>





                       <el-row :gutter="10">

                           <el-col :span="6">
                               <el-form-item label="入职日期:" prop="beginDate">
                                   <el-date-picker
                                           style="width:130px"
                                           v-model="emp.beginDate"
                                           type="date"
                                           value-format="yyyy-MM-dd"
                                           placeholder="入职日期">
                                   </el-date-picker>
                               </el-form-item>
                           </el-col>

                           <el-col :span="5">
                               <el-form-item label="转正日期:" prop="conversionTime">
                                   <el-date-picker
                                           style="width:160px"
                                           v-model="emp.conversionTime"
                                           type="date"
                                           placeholder="转正日期"
                                           value-format="yyyy-MM-dd">
                                   </el-date-picker>
                               </el-form-item>
                           </el-col>

                           <el-col :span="6">
                               <el-form-item label="合同起始日期:" prop="beginContract">
                                   <el-date-picker
                                           style="width:160px"
                                           v-model="emp.beginContract"
                                           type="date"
                                           placeholder="合同起始日期"
                                           value-format="yyyy-MM-dd">
                                   </el-date-picker>
                           </el-form-item></el-col>

                           <el-col :span="7">
                               <el-form-item label="合同截止日期:" prop="beginContract">
                                   <el-date-picker
                                           style="width:160px"
                                           v-model="emp.endContract"
                                           type="date"
                                           placeholder="合同截止日期"
                                           value-format="yyyy-MM-dd">
                                   </el-date-picker>
                               </el-form-item>
                           </el-col>


                       </el-row>







                       <el-row :gutter="10">

                           <el-col :span="8">
                               <el-form-item label="身份证号码:" prop="idCard">
                                    <el-input v-model="emp.idCard" placeholder="请输入身份证" size="mini"
                                    prefix-icon="el-icon-edit" style="width:180px"></el-input>
                               </el-form-item>
                           </el-col>

                           <el-col :span="8">
                               <el-form-item label="聘用形式:" prop="engageForm" style="display:flex;">
                                   <el-radio-group v-model="emp.engageForm">
                                       <el-radio label="劳动合同">劳动合同</el-radio>
                                       <el-radio label="劳务合同">劳务合同</el-radio>
                                   </el-radio-group>

                               </el-form-item>
                           </el-col>

                           <el-col :span="8">
                               <el-form-item label="婚姻状况:" prop="wedlock" style="display:flex;">
                                   <el-radio-group v-model="emp.wedlock" >
                                       <el-radio label="已婚">已婚</el-radio>
                                       <el-radio label="未婚">未婚</el-radio>
                                       <el-radio label="离异">离异</el-radio>
                                   </el-radio-group>
                               </el-form-item>
                          </el-col>



                       </el-row>


                   </el-form>
                </div>


                <span slot="footer" class="dialog-footer">
    <el-button @click="dgb">取 消</el-button>
    <el-button type="primary" @click="doAddEmp">确 定</el-button>
                </span>
            </el-dialog>


        </div>


    </div>
</template>

<script>
    export default {
        name: "EmpBasic",
        data(){
            return{
                /*高级搜索对象*/
                searchValue:{
                    politicId:null,
                    nationId:null,
                    posId:null,
                    engageForm:'',
                    departmentId:null,
                    beginDateScope:null
                },
                defaultProps:{
                    children:'children',
                    label:'name'
                },
                headers:{
                    Authorization:window.sessionStorage.getItem('tokenStr')
                },
                visible2:false,
                showAdvanceSearchVisible:false,
                importDataBtnDisabled:false,
                importDataBtnText:'导入数据',
                importDataBtnIcon:'el-icon-upload2',
                title:'',
                inputDepName:'',
                allDeps:[],
                dialogVisible:false,
                emps:[],
                loading:false,
                size:'10',
                page:'1',
                empName:'',
                nations:[],
                jobLevels:[],
                politicsstatus:[],
                positions:[],
                tiptopDegrees:['博士','硕士','本科','大专','高中','初中','小学','其他'],
                visible:false,
                emp:{
                    id: null,
                    name: "",
                    gender: "",
                    birthday: "",
                    idCard: "",
                    wedlock: "",
                    nationId: "",
                    nativePlace: "",
                    politicId: null,
                    email: '',
                    phone: '',
                    address: '',
                    departmentId: null,
                    jobLevelId: null,
                    posId: null,
                    engageForm: '',
                    tiptopDegree: '',
                    specialty: '',
                    school: '',
                    beginDate: '',
                    workState: '在职',
                    workID: '',
                    contractTerm: null,
                    conversionTime: '',
                    notWorkDate: null,
                    beginContract: '',
                    endContract: '',
                    workAge: null,
                    salaryId: null
                },
                rules:{
                    name:[{required:true,message:'请输入员工姓名',trigger:'blur'}],
                    gender:[{required:true,message:'请输入员工性别',trigger:'blur'}],
                    birthday:[{required:true,message:'请输入出生日期',trigger:'blur'}],
                    /*身份证格式elementui没有自带所以采用正则表达式*/
                    idCard:[{required:true,message:'请输入身份证',trigger:'blur'},{pattern:"^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$",message:'身份证格式不对',trigger:'blur'}],
                    wedlock: [{required:true,message:'请输入婚姻状况',trigger:'blur'}],
                    nationId: [{required:true,message:'请输入民族',trigger:'blur'}],
                    nativePlace:[{required:true,message:'请输入籍贯',trigger:'blur'}],
                    politicId: [{required:true,message:'请输入政治面貌',trigger:'blur'}],
                    email: [{required:true,message:'请输入邮箱地址',trigger:'blur'},
                        {type:'email',message: '邮箱格式不对',trigger:'blur'}],
                    phone: [{required:true,message:'请输入联系电话',trigger:'blur'}],
                    address: [{required:true,message:'请输入员工地址',trigger:'blur'}],
                    departmentId:[{required:true,message:'请输入部门',trigger:'blur'}],
                    jobLevelId: [{required:true,message:'请输入职称',trigger:'blur'}],
                    posId: [{required:true,message:'请输入职位',trigger:'blur'}],
                    engageForm: [{required:true,message:'请输入聘用形式',trigger:'blur'}],
                    tiptopDegree: [{required:true,message:'请输入学历',trigger:'blur'}],
                    specialty: [{required:true,message:'请输入专业',trigger:'blur'}],
                    school: [{required:true,message:'请输入毕业院校',trigger:'blur'}],
                    beginDate:[{required:true,message:'请输入入职日期',trigger:'blur'}],
                    workState: [{required:true,message:'请输入工作状态',trigger:'blur'}],
                    workID: [{required:true,message:'请输入员工号',trigger:'blur'}],
                    contractTerm: [{required:true,message:'请输入合同日期',trigger:'blur'}],
                    conversionTime: [{required:true,message:'请输入转正日期',trigger:'blur'}],
                    notWorkDate: [{required:true,message:'请输入离职日期',trigger:'blur'}],
                    beginContract: [{required:true,message:'请输入合同起始日期',trigger:'blur'}],
                    endContract: [{required:true,message:'请输入合同截止日期',trigger:'blur'}],
                    workAge:[{required:true,message:'请输入工龄',trigger:'blur'}],
                    /*salaryId: [{required:true,message:'请输入员工姓名',trigger:'blur'}]*/
                }
            }
        },
        mounted(){
          this.initemps();
            this.initData();
            this.initPositions();
            this.getMaxWorkID();
        },
        methods:{
            //上传失败改变图标
            Error(){
                this.importDataBtnIcon='el-icon-upload2';
                this.importDataBtnText='导入数据';
                this.importDataBtnDisabled=false;

            },
            //上传成功也改变图标
            Success(){
                    this.importDataBtnIcon='el-icon-upload2';
                    this.importDataBtnText='导入数据';
                this.importDataBtnDisabled=false;
                this.initemps();
            },
            beforeUpload(){
                this.importDataBtnIcon='el-icon-loading';
                this.importDataBtnText='正在导入';
                this.importDataBtnDisabled=true;
            },
            exportData(){
                this.downloadRequest('/employee/basic/export');
            },
            //编辑
            showEditEmpView(data){
              this.title='编辑员工信息';
              this.inputDepName=data.department.name;
              Object.assign(this.emp,data);
            /*  this.emp=data;*/
              this.dialogVisible=true;
            },
            //删除员工
            deleteEmp(data){
                this.$confirm('此操作将永久删除 [' + data.name + '] 员工, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest('/employee/basic/' + data.id).then(resp => {
                        if (resp) {
                            this.initemps();
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            doAddEmp(){
                if(this.emp.id){
                    this.$refs['empForm'].validate((valid) => {
                        if (valid) {
                            this.putRequest('/employee/basic/',this.emp).then(resp=>{
                                if (resp){
                                    this.dialogVisible=false;
                                    this.initemps();
                                }
                            });
                        }
                    });
                }else{
                    this.$refs['empForm'].validate((valid) => {
                        if (valid) {
                            this.postRequest('/employee/basic/',this.emp).then(resp=>{
                                if (resp){
                                    this.dialogVisible=false;
                                    this.initemps();
                                }
                            });
                        }
                    });
                }
            },
            dgb(){
                this.dialogVisible = false;
                this.visible=false;
            },
            /*关闭添加窗口的小窗口*/
            handleClose(done){
                this.visible=false;
                    done();

            },
            //处理高级搜索部门问题
            searchHandleNodeClick(data){
                this.inputDepName=data.name;
                this.searchValue.departmentId=data.id;
                this.visible2= !this.visible2;
            },
            //添加员工部门事件
            handleNodeClick(data){
                this.inputDepName=data.name;
                this.emp.departmentId=data.id;
                this.visible=!this.visible;
            },
            //添加员工展示部门选择值
            showDepView(){
                this.visible =!this.visible;
            },
            //高级搜索展示部门选择值
            showDepView2(data){
                if (data=='1'){
                    this.visible2=!this.visible2;
                }else{
                    this.visible2=false;
                }
            },
            getMaxWorkID(){
                this.getRequest('/employee/basic/maxWorkID').then(resp=>{
                    if (resp){
                        this.emp.workID=resp.obj;
                    }
                })
            },
            initPositions(){
                    this.getRequest('/employee/basic/positions').then(resp=>{
                        if (resp){
                            this.positions=resp;
                        }
                    })
            },

            initData(){
                if (!window.sessionStorage.getItem('nations')){
                    this.getRequest('/employee/basic/nations').then(resp=>{
                        if (resp){
                            this.nations=resp;
                            window.sessionStorage.setItem('nations',JSON.stringify(resp));
                        }
                    })
                }else{
                    this.nations=JSON.parse(window.sessionStorage.getItem('nations'));
                }

                if (!window.sessionStorage.getItem('jobLevels')){
                    this.getRequest('/employee/basic/joblevels').then(resp=>{
                        if (resp){
                            this.jobLevels=resp;
                            window.sessionStorage.setItem('jobLevels',JSON.stringify(resp));
                        }
                    })
                }else{
                    this.jobLevels=JSON.parse(window.sessionStorage.getItem('jobLevels'));
                }


                if (!window.sessionStorage.getItem('politicsstatus')){
                    this.getRequest('/employee/basic/politicsstatus').then(resp=>{
                        if (resp){
                            this.politicsstatus=resp;
                            window.sessionStorage.setItem('politicsstatus',JSON.stringify(resp));
                        }
                    })
                }else{
                    this.politicsstatus=JSON.parse(window.sessionStorage.getItem('politicsstatus'));
                }


                if (!window.sessionStorage.getItem('allDeps')){
                    this.getRequest('/employee/basic/deps').then(resp=>{
                        if (resp){
                            this.allDeps=resp;
                            window.sessionStorage.setItem('allDeps',JSON.stringify(resp));
                        }
                    })
                }else{
                    this.allDeps=JSON.parse(window.sessionStorage.getItem('allDeps'));
                }



            },
            /*点击添加员工触发*/
            showAddEmpView(){
                this.emp={
                        id: null,
                        name: "",
                        gender: "",
                        birthday: "",
                        idCard: "",
                        wedlock: "",
                        nationId: "",
                        nativePlace: "",
                        politicId: null,
                        email: '',
                        phone: '',
                        address: '',
                        departmentId: null,
                        jobLevelId: null,
                        posId: null,
                        engageForm: '',
                        tiptopDegree: '',
                        specialty: '',
                        school: '',
                        beginDate: '',
                        workState: '在职',
                        workID: '',
                        contractTerm: null,
                        conversionTime: '',
                        notWorkDate: null,
                        beginContract: '',
                        endContract: '',
                        workAge: null,
                        salaryId: null
                };
                this.title='添加员工';
                this.dialogVisible=true;
                this.initData();
                this.initPositions();
                this.getMaxWorkID();
            },
            //页数改变触发
            currentChange(currentPage){
                    this.page=currentPage;
                    this.initemps();
            },
            //每页显示条数改变触发
            sizeChange(size){
                this.size=size;
                this.initemps();
            },


         /*   initemps(){
                this.loading=true;
                this.getRequest('/employee/basic/?currentPage='+this.page+'&size='+this.size).then(resp=>{
                    this.loading=false;
                    if(resp){
                        this.emps=resp;
                    }
                });
            },*/

    initemps(type){
                this.loading=true;
                let url = '/employee/basic/?currentPage='+this.page+'&size='+this.size;
                if (type && type=='advanced'){
                    if (this.searchValue.nationId){
                        url+='&nationId='+this.searchValue.nationId;
                    };
                    if (this.searchValue.politicId){
                        url+='&politicId='+this.searchValue.politicId;
                    };
                    if (this.searchValue.posId){
                        url+='&posId='+this.searchValue.posId;
                    };
                    if (this.searchValue.jobLevelId){
                        url+='&jobLevelId='+this.searchValue.jobLevelId;
                    };
                    if (this.searchValue.engageForm){
                        url+='&engageForm='+this.searchValue.engageForm;
                    };
                    if (this.searchValue.departmentId){
                        url+='&departmentId='+this.searchValue.departmentId;
                    };
                    if (this.searchValue.beginDateScope){
                        url+='&beginDateScope='+this.searchValue.beginDateScope;
                    };

                }else{
                    url+='&name='+this.empName;
                }

                this.getRequest(url).then(resp=>{
                    this.loading=false;
                    if(resp){
                        this.emps=resp;
                    }
                });
            }




        }
    }
</script>

<style scoped>
    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all .8s ease;
    }
    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */ {
        transform: translateX(10px);
        opacity: 0;
    }
</style>
